<template>
	<div class="middle" id="middle" v-loading="loading" element-loading-background="rgba(0,0,0, 0.5)">
		<div class="middlebg"></div>
		<div class="school">
			<span>{{schoolname}}</span>
      <button class="constitution" @click="goConstitution">体质数据</button>
			<span class="grid-content bg-purple-light fullscreen" @click.prevent="handleFullScreen">
				<el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
			    <span class="el-icon-rank icon">
            <a href="javascript:;" class="font" v-if="fullscreen">取消全屏</a>
            <a href="javascript:;" class="font" v-else>全屏</a>
          </span>
			    <span class="font">开启全屏</span>
			  </el-tooltip>
			</span>
		</div>
		<table class="main" border=0 cellpadding="0" cellspacing="0">
			<tr class="top clearfix">
				<td  class="left">
					<div v-model="deviceCount">
						<h4><i class="el-icon-printer"></i>设备统计</h4>
						<div class="statistics">
							<div>设备数量: <span>{{deviceCount.count}}</span></div>
							<div>设备批次: <span>{{deviceCount.batch}}</span></div>
							<div>使用次数: <span>{{deviceCount.frequency}}</span></div>
							<div>使用人数: <span>{{deviceCount.student_count}}</span></div>
							<div>开始日期: <span>{{deviceCount.time}}</span></div>
						</div>
					</div>
				</td>
				<td  class="center">
					<div>
						<h4><i class="el-icon-date"></i>教学计划进度</h4>
						<div v-if="teacherPlanCount == ''?true:false" class="noPlan">暂无教学计划</div>
						<div class="start" v-model="teacherPlanCount">
							<div v-for="item in teacherPlanCount">
								<img src="../../assets/image/people.png" alt="">
								<span>{{item.teacher_name}}</span>
								<span class="plan"><span>单元：{{item.class_hour}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>已上课：{{item.hour}}</span></span>
								<el-progress class="progress" :text-inside="true" :stroke-width="18" :percentage="Number(item.progress)" status="success"></el-progress>
							</div>
						</div>
					</div>
				</td>
				<td class="right">
					<div v-model="havingClass">
						<h4><img src="../../assets/image/classBegin.png" alt="">&nbsp;&nbsp;当前在上课</h4>
						<div class="content">
							<div v-if="havingClass == ''?true:false" class="noClass">暂无上课班级</div>
							<div class="classes" v-for="item in havingClass" @click="heartRate(item.class_id,item.teacher_id)">
								<span class="title">{{item.class}}</span>
								<div class="message">
									<div>任课老师：{{item.teacher}}</div>
									<div>设备批次：{{item.batch}}</div>
									<div>上课人数：{{item.count}}</div>
								</div>
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr class="bottom">
				<td class="left">
					<div v-model="notice">
						<h4>通知公告<span class="more" @click="more">MORE</span></h4>
						<div class="msg" v-for="item in notice">
							<div @click="open(item.id)">
								<h5>●&nbsp;&nbsp;{{item.title}}</h5>
								<p>{{item.contents}}</p>
								<div class="time">{{item.create_time}}</div>
							</div>
							<!--消息内容展示-->
							<div v-model = "noticeContent">
								<el-dialog
									  :title="noticeContent.title"
									  :visible.sync="showContent"
									  width="30%"
									  center>
									  <span v-html="noticeContent.contents"></span>
									  <div class="time" style="text-align: right; padding-top: 10px; padding-bottom: 10px;">{{noticeContent.create_time}}</div>
								</el-dialog>
							</div>
						</div>
					</div>
				</td>
				<td class="center">
					<div>
						<h4><img src="../../assets/image/heart.png" alt="">&nbsp;&nbsp;心率统计</h4>
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="本周" name="first">
								<table>
									<ul>
										<li class="first"></li>
										<li><img src="../../assets/image/heart_people.png" alt=""></li>
										<li><img src="../../assets/image/boy.png" alt=""></li>
										<li><img src="../../assets/image/girl.png" alt=""></li>
									</ul>
									<ul>
										<li>最高心率</li>
										<li v-if="countHeart.max_heart_rate == null">暂无</li>
										<li v-else>{{countHeart.max_heart_rate}}</li>
										<li v-if="manHeart.max_heart_rate === null">暂无</li>
										<li v-else>{{manHeart.max_heart_rate}}</li>
                    <li v-if="womanHeart.max_heart_rate === null">暂无</li>
										<li v-else>{{womanHeart.max_heart_rate}}</li>
									</ul>
									<ul>
										<li>最低心率</li>
                    <li v-if="countHeart.min_heart_rate == null">暂无</li>
										<li v-else>{{countHeart.min_heart_rate}}</li>
                    <li v-if="manHeart.min_heart_rate == null">暂无</li>
										<li v-else>{{manHeart.min_heart_rate}}</li>
                    <li v-if="womanHeart.min_heart_rate == null">暂无</li>
										<li v-else>{{womanHeart.min_heart_rate}}</li>
									</ul>
									<ul>
										<li>平均心率</li>
                    <li v-if="countHeart.avg_heart_rate == null">暂无</li>
										<li v-else>{{countHeart.avg_heart_rate}}</li>
                    <li v-if="manHeart.avg_heart_rate == null">暂无</li>
										<li v-else>{{manHeart.avg_heart_rate}}</li>
                    <li v-if="womanHeart.avg_heart_rate == null">暂无</li>
										<li v-else>{{womanHeart.avg_heart_rate}}</li>
									</ul>
								</table>
								<div id="bar_dv" ref="chart" :style="{width: '96%', height: '280px'}"></div>
							</el-tab-pane>
							<el-tab-pane label="本月" name="second">
								<table>
									<ul>
										<li class="first"></li>
										<li><img src="../../assets/image/heart_people.png" alt=""></li>
										<li><img src="../../assets/image/boy.png" alt=""></li>
										<li><img src="../../assets/image/girl.png" alt=""></li>
									</ul>
									<ul>
										<li>最高心率</li>
                    <li v-if="countHeart2.max_heart_rate == null">暂无</li>
										<li v-else>{{countHeart2.max_heart_rate}}</li>
                    <li v-if="manHeart2.max_heart_rate == null">暂无</li>
										<li v-else>{{manHeart2.max_heart_rate}}</li>
                    <li v-if="womanHeart2.max_heart_rate == null">暂无</li>
										<li v-else>{{womanHeart2.max_heart_rate}}</li>
									</ul>
									<ul>
										<li>最低心率</li>
                    <li v-if="countHeart2.max_heart_rate == null">暂无</li>
										<li v-else>{{countHeart2.min_heart_rate}}</li>
                    <li v-if="manHeart2.min_heart_rate == null">暂无</li>
										<li v-else>{{manHeart2.min_heart_rate}}</li>
                    <li v-if="womanHeart2.min_heart_rate == null">暂无</li>
										<li v-else>{{womanHeart2.min_heart_rate}}</li>
									</ul>
									<ul>
										<li>平均心率</li>
                    <li v-if="countHeart2.avg_heart_rate == null">暂无</li>
										<li v-else>{{countHeart2.avg_heart_rate}}</li>
                    <li v-if="manHeart2.avg_heart_rate == null">暂无</li>
										<li v-else>{{manHeart2.avg_heart_rate}}</li>
                    <li v-if="womanHeart2.avg_heart_rate == null">暂无</li>
										<li v-else>{{womanHeart2.avg_heart_rate}}</li>
									</ul>
								</table>
								<div id="bar_dv2" ref="chart2" :style="{width: '36rem', height: '280px'}"></div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</td>
				<td class="right">
					<div>
						<h4><i class="el-icon-refresh"></i>资源更新</h4>
						<el-tabs v-model="teachingPlan" @tab-click="handleClick2">
							<el-tab-pane label="教案" name="first">
								<el-row class="xian">
									<el-col :span="11" v-for="item in planList" :key="item.id">
										<div class="grid-content bg-purple run">
											<span>
												<img src="../../assets/image/lian2.png" alt="" />
												<span :title="item.motion" class="title" @click="content(item.id)">{{item.motion}}</span>
											</span>
										</div>
								  </el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane label="视频" name="second">
								<el-row class="somevideo">
								  <el-col class="sv" :span="8" v-for="item in videoList" :key="item.id">
								  	<div class="grid-content bg-purple-light video" @click="videocontent(item.id)">
								  		<div class="player">
											<img :src="item.icon_path" alt="" />
										</div>
										<div class="video-title">{{item.title}}</div>
								  	</div>
								  </el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane label="图书" name="third">
								<el-row class="somebook">
								  <el-col :span="8" v-for="item in bookInfo" :key="item.id">
								  		<div class="grid-content bg-purple book" @click = "bookcontent(item.id)">
									  		<img :src="item.thumb" alt="" />
									  		<div class="message">
									  			<div class="bookname">{{item.title}}</div>
									  		</div>
								  		</div>
								  </el-col>
								</el-row>
							</el-tab-pane>
						</el-tabs>
					</div>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		name:'hello',
		data (){
			return {
				loading:true,
				showContent:false,//通知
				fullscreen:false,//全屏
				schoolname:'',//学校名字
				deviceCount:[],//设备统计
				activeName: 'first',//心率统计
				teachingPlan:'first',//教案部分
				teacherPlanCount:[],//存放教学进度
				progress:1,//进度百分百
				havingClass:[],//正在上课班级
				havingClassId:'',
				noticeContent:[],//通知内容
				planList:[],//教材内容
				videoType:[],//视频类型
				videoList:[],//获取视频资源
				videoid:'',
				bookInfo:[],//图书信息
				type_id:'',
				notice:[],
				noticeContents:'',
				week:'week',
				month:'month',
				countHeart:[],
				manHeart:[],
				womanHeart:[],
				countHeart2:[],
				manHeart2:[],
				womanHeart2:[],
				echartsWeek:[],
				echartsMonth:[],
				count:[],
				man:[],
				woman:[],
				count2:[],
				man2:[],
				woman2:[],
			}
		},
		mounted(){
			this.drawLine();
		},
		methods: {
			//全屏功能
			handleFullScreen(){
				let element = document.getElementById('middle');
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
			    }
			    } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
			    }
				this.fullscreen = !this.fullscreen;
			 },
			//获取设备统计
			getDeviceCount(){
				this.$http.post('/api/data_count/deviceCount')
					.then(res=>{
						this.deviceCount = res.data.data
					})
			},
			//获取教学进度计划
			getTeacherPlanCount(){
				this.$http.post('/api/data_count/teacherPlanCount')
					.then(res=>{
						this.teacherPlanCount = res.data.data
						var progress = []
						this.teacherPlanCount.map(item=>{
							var hour = item.hour
							var class_hour = item.class_hour

							if((item.hour/item.class_hour)>=1){
								item.progress = 100
							}else {
								item.progress = Number((item.hour/item.class_hour)*100).toFixed()
							}
						})
					})
			},
			//正在上课的班级
			getHavingClass(){
				this.$http.post('/api/data_count/havingClass')
					.then(res=>{
						this.havingClass = res.data.data
						this.havingClass.map(item=>{
							this.havingClassId = item.id
              this.class_id = item.class_id
						})
						//获取上课记录id
						localStorage.setItem('havingClassId',this.havingClassId)
						localStorage.setItem('class_id',this.class_id)
					})
			},
			heartRate(id,teacher_id){
				// this.$router.push({path:'/heartRate/'+id+'/'+teacher_id})
        this.$router.push(
          {
            name:'heartRate',
            path:'/heartRate',
            query:{
              id:id,
              teacher_id:teacher_id
            }
          }
        )
      },
			//通知
			getNotice(){
				this.$http.post('/api/data_count/notice')
					.then(res=>{
						this.notice = res.data.data
						this.notice.map(item=>{
							this.noticeContents = item.noticeContents
						})
					})
			},
			open(id) {
				this.$http.post('/api/first/firstSchoolIsRead',{
					id:id
				}).then(res=>{
					this.noticeContent = res.data.data
				})
				this.showContent = true
			},
      goConstitution(){
        this.$router.push({path:'/constitution'})
      },
			more(){
				this.$router.push({path:'/notice'})
			},
			//心率统计
			handleClick(tab, event) {
			},
			//获取本周心率
			getheartRate(){
				this.$http.post('/api/data_count/heartRate',{
					type:this.week,
				}).then(res=>{
					this.countHeart = res.data.count
					this.manHeart = res.data.man
					this.womanHeart = res.data.woman

				})
			},
			//获取本月心率
			getheartRate2(){
				this.$http.post('/api/data_count/heartRate',{
					type:this.month,
				}).then(res=>{
					this.countHeart2 = res.data.count
					this.manHeart2 = res.data.man
					this.womanHeart2 = res.data.woman
				})
			},
			drawLine(){
				// 基于准备好的dom，初始化echarts实例
				// let myChart = this.$echarts.init(document.getElementById('myChart'))
				let bar_dv = this.$refs.chart;
				let myChart = this.$echarts.init(bar_dv)
				//绘制图表
				myChart.setOption({
					title: {
						//text: '心率记录'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['全班心率','男生心率','女生心率']
					},
					grid: {
						left: '3%',
						right: '4%',
						containLabel: true
					},
					toolbox: {
						show : true,
						feature: {
						}
					},
					xAxis:{
						type: 'category',
						boundaryGap: false,
						data:this.echartsWeek
					},
					yAxis: {
						type: 'value',
						splitNumber:4,
					},
					series: [
						{
							name:'全班心率',
							type:'line',
							smooth: true,
							data:this.count,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
									]
							},
							 markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						},
						{
							name:'男生心率',
							type:'line',
							smooth: true,
							data:this.man,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
									]
							},
							 markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						},
						{
							name:'女生心率',
							type:'line',
							stack: '总量',
							smooth: true,
							data: this.woman,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
									]
							},
							 markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						}]
				});
			},
			drawLine2(){
				// 基于准备好的dom，初始化echarts实例
				//let monthChart = this.$echarts.init(document.getElementById('monthChart'))
				let bar_dv2 = this.$refs.chart2;
				let monthChart = this.$echarts.init(bar_dv2)
				//绘制图表
				monthChart.setOption({
					title: {
						//text: '心率记录'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['全班心率','男生心率','女生心率']
					},
					grid: {
						left: '3%',
						right: '4%',
						containLabel: true
					},
					toolbox: {
						show : true,
						feature: {
						}
					},
					xAxis:{
						type: 'category',
						boundaryGap: false,
						data:this.echartsMonth
					},
					yAxis: {
						type: 'value',
						splitNumber:4,
					},
					series: [
						{
							name:'全班心率',
							type:'line',
							smooth: true,
							data:this.count2,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
									]
							},
							 markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						},
						{
							name:'男生心率',
							type:'line',
							smooth: true,
							data:this.man2,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
									]
							},
							 markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						},
						{
							name:'女生心率',
							type:'line',
							stack: '总量',
							smooth: true,
							data: this.woman2,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
									]
							},
							 markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						}]
				});
			},
			echarts(){
				this.$http.post('/api/data_count/echarts',{
					type:this.week
				}).then(res=>{
					this.count = res.data.count
					this.man = res.data.man
					this.woman = res.data.woman
					this.echartsWeek= res.data.day
					this.drawLine();
      })
				this.$http.post('/api/data_count/echarts',{
					type:this.month
				}).then(res=>{
					this.count2 = res.data.count
					this.man2 = res.data.man
					this.woman2 = res.data.woman
					this.echartsMonth = res.data.day
					this.drawLine2();
				})
			},
			//教案部分
			handleClick2(tab, event) {
			},
			//教案
			getResources(){
				this.$http.post('/api/data_count/resources')
					.then(res=>{
						this.planList = res.data.plan
						this.videoList = res.data.video
						this.bookInfo = res.data.book
						this.loading = false
					})
			},
			 //获取教学id加入到地址栏后
			content(id){
				this.$router.push({path:'/content/'+id})
			},
			videocontent(id){
				this.$router.push({path:'/videocontent/'+id})
			},
			bookcontent(id){
				this.$router.push({path:'/book/'+id})
			}
		},
		created(){
			this.getDeviceCount()
			this.getTeacherPlanCount()
			//this.getHavingClass()
			this.getheartRate()
			this.getheartRate2()
			this.echarts()
			this.getNotice()
			this.getResources()
			//学校
			this.schoolname = localStorage.getItem('schoolname')
		},
		mounted(){
			if(this.timer){
				clearInterval(this.timer)
			}else {
				this.timer = setInterval(()=>{
					this. getHavingClass()
				},5000)
			}
      this.$nextTick(function(){
        this.drawLine();
        this.drawLine2();
      })
		},
		destroyed(){
			clearInterval(this.timer)
      window.removeEventListener('bar_dv', this.drawLine, 20)
      window.removeEventListener('bar_dv2', this.drawLine2, 20)
		},
	}
</script>
<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
	body {
		overflow-y: hidden;
	}
</style>
 <style lang="less" scoped>
	.middle {
    .middlebg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			background: #fff;
			background-size: 100%;
		}
		.school {
			height: 50px;
			line-height: 50px;
			background: #00b02d;
			padding-left: 50px;
			color: #fff;
			font-size: 18px;
			position: relative;
			.span {
				display: inline-block;
			}
      .constitution {
        font-size: 14px;
        padding: 3px 15px;
        background: #3a8ee6;
        float: right;
        margin-top: 12px;
        border: 1px solid transparent;
        outline: none;
        margin-right: 200px;
        color: #fff;
      }
			.fullscreen {
				position: absolute;
				right: 30px;
				.font {
					color: #fff;
					font-size: 16px;
					padding-left: 10px;
				}
			}
		}
		.main {
			width: 100%;
			background: #fff;
      border-left: 1px solid #666666;
			.top {
				width: 100%;
				border: 0;
				.left {
					border-right: 1px solid #ccc;
					width: 19%;
					height: 100%;
					padding: 1%;
					vertical-align: top;
					border-bottom: 1px solid #ccc;
					i {
						font-size: 1.25rem;
						padding-right: 0.625rem;
					}
					.statistics {
						padding-top: 0.625rem;
						padding-left: 6%;
						div {
							height: 1.875rem;
							line-height: 1.875rem;
							font-size: 0.875rem;
							span {
								color: deepskyblue;
								font-weight: 600;
							}
						}
					}
				}
				.center {
					width: 44%;
					height: 100%;
					padding: 1%;
					vertical-align: top;
					border-right: 1px solid #ccc;
					border-bottom: 1px solid #ccc;
					i {
						font-size: 1.25rem;
						padding-right: 0.625rem;
					}
					.noPlan {
						padding-top:3.125rem;
						font-size: 1.875rem;
						text-align: center;
						color: #ccc;
					}
					.start {
						padding-top: 0.625rem;
						// padding-left: 6%;
						div {
							height:3.125rem;
							line-height: 3.125rem;
							position: relative;
							.plan {
								font-size: 0.625rem;
								position: absolute;
								top: -18px;
								right:20%;
							}
							.progress {
								display: inline-block;
								width: 25rem;
								height: 10px;
							}
						}
					}
				}
				.right {
					height: 100%;
					width: 30%;
					padding: 1%;
					vertical-align: top;
					border-bottom: 1px solid #ccc;
					.content {
						margin-top:0.625rem;
						.noClass {
							padding-top:3.125rem;
							font-size: 1.875rem;
							text-align: center;
							color: #ccc;
						}
						.classes {
							background: #ccc;
							display: inline-block;
							margin-bottom: 0.625rem;
							margin-right: 10px;
							cursor: pointer;
							.title {
								display: inline-block;
								width: 100%;
								height: 2.5rem;
								line-height: 2.5rem;
								text-align: center;
								background: deepskyblue;
							}
							div {
								padding: 0.3125rem;
								font-size: 0.875rem;
							}
							.message {
								div {
									padding: 0.3125rem 0;
									font-size: 0.875rem;
								}
							}

						}
					}

				}
			}
			.bottom {
				width: 100%;
				.left {
					padding: 1%;
					vertical-align: top;
					border-right: 1px solid #ccc;
					.more {
						float: right;
						color: #ccc;
						font-size: 1rem;
						cursor: pointer;
					}
					.msg {
						margin-top: 5px;
						margin-bottom: 30px;
						cursor: pointer;
						h5 {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							line-height: 25px;
							max-height: 25px;
							-webkit-line-clamp: 1;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
							height: 30px;
							line-height: 30px;
						}
						p {
							width: 260px;
              /*margin: 0 10px;*/
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							line-height: 23px;
							max-height: 46px;
							-webkit-line-clamp: 2;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
							font-size: 14px;
							color: #666;
						}
						.time {
							float: right;
							font-size: 14px;
							padding-top: 0.625rem;
							color: #666;
						}
					}

				}
				.center {
					padding: 1%;
					padding-bottom: 0;
					width: 44%;
					border-right: 1px solid #ccc;
					vertical-align: top;
					h4 {
						img {
							width: 15px;
							height: 15px;
						}
					}
					table {
						ul {
							li{
								display: inline-block;
								width: 80px;
								text-align: center;
								height: 30px;
								line-height: 30px;

							}
						}
					}
				}
				.right {
					padding: 1%;
					vertical-align: top;
					i {
						font-size: 1.25rem;
						padding-right: 0.625rem;
					}
					.xian {
						.run {
							width: 60%;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;

							-webkit-line-clamp: 1;
              /*! autoprefixer: off */
							-webkit-box-orient: vertical;
              /* autoprefixer: on */
							cursor: pointer;
							font-size: 14px;
							height: 50px;
							line-height: 50px;
							padding-left: 1.25rem;
							&:hover{
								color: deepskyblue;
							}
						}


					}
					.somevideo {
						.video {
							width: 80%;
							text-align: center;
              cursor: pointer;
							.player {
								margin-top: 34px;
								img {
									width:100px;
									height: 60px;
								}
							}
							.video-title {
								font-size: 12px;
								text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
							}
						}
					}
					.somebook {
						.book {
              cursor: pointer;
							img {
								width: 60%;
								height: 140px;
							}
							.message {
								font-size: 14px;
								width: 80%;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								height: 40px;
								line-height: 40px;
								-webkit-line-clamp: 1;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
								cursor: pointer;

							}
						}
					}
				}
			}
		}
	}
 </style>
